<template>
  <div class="commodity">
    <!-- 头部标题 -->
    <div class="head_tit">
      <div class="tit_fl">
        <img
          v-if="commTit == '商品'"
          @click="$router.push({name:'Search'})"
          class="tit_fl_img"
          src="../assets/img/search@2x.png"
          alt
        />
        <img
          v-else
          @click="$router.go(-1)"
          class="tit_fl_imgs"
          src="../assets/myImg/back@2x.png"
          alt
        />
      </div>
      <span>{{commTit}}</span>
    </div>
    <!-- banner图 -->
    <div class="head_banner">
      <img :src="commBanner" alt />
    </div>

    <!-- 下方内容区 -->
    <div class="comm_cen">
      <!-- 上方导航 -->
      <div class="product_list">
        <div class="wrapper" ref="wrapper">
          <ul class="product_item" :style="sliderStyle">
            <li
              v-for="(item,index) in courseList"
              @click="classDetail(item.id,index)"
              :key="item.id"
              :class="currentNav == index? 'isShowNav':''"
            >{{item.name}}</li>
          </ul>
        </div>
        <div class="selection" @click="showTimeScree">
          <img src="../assets/myImg/up@2x.png" alt />
          <img src="../assets/myImg/down@2x.png" alt />
        </div>
      </div>
      <scroll
        class="content"
        ref="scroll"
        :probe-type="1"
        :pull-up-load="true"
        @touchEnd="touchEnd"
        :maxHeight="58"
        @scroll="contentScroll"
      >
        <ul class="comm_list">
          <li class="comm_item" v-for="(item,index) in cateGoodsList" :key="index" @click="gocommDeta(item.post_source)">
            <h1 class="comm_tit">{{item.post_title}}</h1>
            <p class="comm_url">{{item.post_source}}</p>
            <p class="comm_xl">
              <span>月销量: {{item.post_hits}}</span>
              <span>价格: {{item.post_like}}</span>
              <span>佣金: {{item.comment_count}}</span>
              <span>比例: {{item.rate}}</span>
            </p>
            <div class="comm_deta">
              <div class="comm_bq">
                <span>{{item.post_keywords}}</span>
              </div>
            </div>
            <div class="dup_btn" @click="copy(index,item.post_source)" ref="copys">
              <span @click="copy(index,item.post_source)">复制</span>
            </div>
          </li>
          <li class="isShowTit" v-show="isShowTit">暂无更多数据</li>
        </ul>
      </scroll>
      <!-- <van-list :finished="finished" finished-text="没有更多了" @load="onLoad" :offset="2200">
        <ul class="comm_list">
          <li class="comm_item" v-for="(item,index) in cateGoodsList" :key="index">
            <h1 class="comm_tit">{{item.post_title}}</h1>
            <p class="comm_url">{{item.post_source}}</p>
            <p class="comm_xl">
              <span>月销量: {{item.post_hits}}</span>
              <span>价格: {{item.post_like}}</span>
              <span>佣金: {{item.comment_count}}</span>
              <span>比例: {{item.rate}}</span>
            </p>
            <div class="comm_deta">
              <div class="comm_bq">
                <span>{{item.post_keywords}}</span>
              </div>
            </div>
            <div class="dup_btn" @click="copy(index,item.post_source)" ref="copys">
              <span @click="copy(index,item.post_source)">复制</span>
            </div>
          </li>
        </ul>
      </van-list>-->
    </div>
    <van-popup round v-model="isShowTimeScree" position="right" :style="{ height: '66%',}">
      <!-- 时间筛选 查看更多数据 -->
      <ul class="timeScree" v-show="isShowTimeScree">
        <li
          class="timeScree_item"
          @click="getListByTime(item)"
          v-for="(item,index) in timeScreeList"
          :key="index"
        >{{item}}</li>
      </ul>
    </van-popup>
    <BackTop @click.native="clickTop" v-show="isShowBackTop"></BackTop>
    <MainTabBar></MainTabBar>
  </div>
</template>

<script>
import axios from "axios";
import MainTabBar from "../components/content/MainTabBar";

// 滑动组建
import Bscroll from "better-scroll";
import Scroll from "../components/common/scroll/Scroll";
// 节流函数
import { throtTling } from "../utils/throttling";
import { getGoodsCateTime, getGoodsListByTime } from "../api/common";
import { getCommBanner, getCates, getGoodsByCate } from "../api/commodity";
import LoginVue from "./Login.vue";

export default {
  name: "Commodity",
  components: {
    Scroll,
    MainTabBar,
  },
  data() {
    return {
      // 是否显示时间框
      isShowTimeScree: false,
      // 筛选的列表
      timeScreeList: "",
      // 当前选中的分类id
      currentId: "",
      // 是否显示暂无数据
      isShowTit: false,
      // 当前选中高亮
      currentNav: "0",
      commBanner: "",
      // 每页几条数据
      limit: 5,
      // 页数
      page: 1,
      courseList: "",
      cateGoodsList: "",
      cateGoodsArr: [],
      // 返回顶部
      isShowBackTop: false,
      // 商品页面标题
      commTit: "商品",
      // 动态改变父元素的宽度
      sliderStyle: {
        width: "",
      },
      loading: false,
      finished: false,
    };
  },
  methods: {
    // 点击导航查看详情
    classDetail(id, index) { 
      this.currentNav = index;
      this.currentId = id;
      this.page = 1;
      this.isShowTit = false;
      this.isShowTimeScree = false;
      getGoodsByCate(id, this.limit, this.page).then((res) => {
        if (res.code == 200) {
          this.cateGoodsList = res.data.data;
          this.loading = false;
        } else {
          this.$toast({
            duration: 2000,
            message: res.msg,
          });
          this.loading = false;
        }
      });
    },
    // 点击进入小店
    goStore(url) {
      console.log(url);
    },
    // 获取数组第一条id
    courseListArr(info) {
      Object.keys(info).forEach((key) => {
        this.cateGoodsArr.push(info[key]);
      });
      // 根据列表数据动态的设置ul宽度
      this.sliderStyle.width = this.cateGoodsArr.length * 2 + "rem";
      this.currentId = this.cateGoodsArr[0].id;
      getGoodsByCate(this.cateGoodsArr[0].id, this.limit, this.page).then(
        (res) => {
          if (res.code == 200) {
            this.cateGoodsList = res.data.data;
          } else {
            this.$toast({
              message: res.msg,
            });
          }
        }
      );
    },
    // 点击跳转页面
    gocommDeta(url){ 
      android.getUrl(url)
    },
    // 监听滚动
    contentScroll(position) {
      if (position.y < -300) {
        this.isShowBackTop = true;
      } else {
        this.isShowBackTop = false;
      }
    },
    // 筛选时间
    showTimeScree: throtTling(function () {
      this.isShowTimeScree = !this.isShowTimeScree;
      getGoodsCateTime(this.currentId).then((res) => {
        if (res.code == 200) {
          this.timeScreeList = res.data;
        } else {
          this.$toast({
            duration: 2000,
            message: res.msg,
          });
        }
      });
    }, 1000),
    // 根据时间和分类筛选更多内容
    getListByTime(item) { 
      this.page = 1;
      this.isShowTit = false;
      getGoodsListByTime(item, this.currentId, this.limit, this.page).then(
        (res) => {
          if (res.code == 200) {
            this.cateGoodsList = res.data;
            this.isShowTimeScree = false;
            // this.$toast({
            //   duration: 1000,
            //   message: res.msg,
            // });
          } else {
            this.$toast({
              duration: 1000,
              message: res.msg,
            });
          }
        }
      );
    },
    // 加载
    // onLoad: throtTling(function () {
    //   if (this.currentId) {
    //     let pages = (this.page += 1);
    //     getGoodsByCate(this.currentId, this.limit, pages).then((res) => {
    //       if (res.code == 200) {
    //         this.cateGoodsList.push(...res.data.data);
    //         this.page += 1;
    //       } else {
    //         this.finished = true;
    //         // this.$toast({
    //         //   duration: 1000,
    //         //   message: res.msg,
    //         // });
    //       }
    //     });
    //   }
    // }, 2000),
    // 复制
    copy(index, url) {
      let copy = this.$refs.copys[index]; // 添加
      let clipboard = new this.Clipboard(copy, {
        text: () => {
          return url;
        },
      });
      clipboard.on("success", (e) => {
        this.$toast("复制成功"), clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        console.log("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    },
    // 返回顶部
    clickTop() {
      this.$refs.scroll.scrollTo(0, 0);
    },
    // 上拉加载更多
    touchEnd: throtTling(function (y) {
      if (y < -120 && !this.isShowTit) {
        let pages = (this.page += 1);
        getGoodsByCate(this.currentId, this.limit, pages).then((res) => {
          if (res.code == 200) {
            this.cateGoodsList.push(...res.data.data);
            this.page += 1;
            this.isShowTit = false;
          } else {
            this.isShowTit = true;
          }
        });
        this.$refs.scroll.finishPullUp();
        // 重新计算高度
        this.$refs.scroll.refresh();
      }
    }, 2000),
  },
  mounted() {
    // 批量获取数据
    axios.all([getCommBanner("商品"), getCates(3)]).then(
      axios.spread((res, city) => {
        if (res.code == 200 && city.code == 200) {
          this.commBanner = res.data;
          this.courseList = city.data;
          this.courseListArr(this.courseList);
        }
      })
    );
    if (this.$route.query.tyle) {
      this.commTit = "商品链接";
    }
    // 初始化滑动
    this.$nextTick(() => {
      this.scroll = new Bscroll(this.$refs.wrapper, {
        scrollX: true,
        click: true,
      });
    });
  },
};
</script>

<style lang="less" scoped>
.commodity {
  margin: 0 0.373333rem;
  margin-bottom: 1.6rem;
}

// 头部标题
.head_tit {
  position: relative;
  text-align: center;
  color: #333;
  font-weight: 700;
  height: 1.333333rem;
  line-height: 1.333333rem;
  font-size: 0.453333rem;
  .tit_fl {
    position: absolute;
    left: 0;
    top: 0.266667rem;
    width: 0.706667rem;
    height: 0.706667rem;
    background: #eaeaea;
    border-radius: 50%;
    .tit_fl_img {
      position: relative;
      top: -0.32rem;
      width: 0.386667rem;
      height: 0.386667rem;
    }
    .tit_fl_imgs {
      position: relative;
      top: -0.32rem;
      width: 0.4rem;
      height: 0.4rem;
    }
  }
}

// 轮播图
.head_banner {
  height: 3.813333rem;
  img {
    width: 100%;
    height: 100%;
  }
}

// 下方内容区
.comm_cen {
  position: relative;
  .product_list {
    position: relative;
    display: flex;
    height: 1.84rem;
    line-height: 1.84rem;
    border-bottom: 0.16rem solid #f9f9f9;
    span {
      font-size: 0.506667rem;
      color: #647cfa;
      font-weight: 700;
    }
    .product_item {
      overflow: hidden;
      font-size: 0.4rem;
      color: #333333;
      li {
        float: left;
        padding: 0 0.266667rem;
        text-align: center;
      }
    }
    .wrapper {
      width: 8.533333rem;
      overflow: hidden;
    }
    .product_img {
      position: absolute;
      right: 1.333333rem;
      top: 0.32rem;
      width: 0.36rem;
      height: 1.066667rem;
    }
    .selection {
      position: absolute;
      right: 0;
      padding-top: 0.666667rem;
      width: 0.213333rem;
      // height: 1.333333rem;
      line-height: 0;
      img {
        width: 0.213333rem;
        height: 0.213333rem;
      }
    }
  }

  .comm_list {
    padding: 0.4rem 0;
    .comm_item {
      margin-bottom: 0.4rem;
      position: relative;
      padding: 0.266667rem;
      // height: 4.453333rem;
      overflow: hidden;
      border: 0.013333rem solid #eee;
      border-radius: 0.2rem;
      .comm_tit {
        margin: 0.373333rem 0;
        margin-right: 1.333333rem;
        font-size: 0.453333rem;
        color: #333;
      }
      .comm_url {
        margin-bottom: 0.52rem;
        width: 6.4rem;
        height: 0.866667rem;
        font-size: 0.32rem;
      }
      .comm_bq {
        margin-top: 0.4rem;
        width: 5.12rem;
        height: 0.586667rem;
        line-height: 0.586667rem;
        background: #647cfa;
        color: #fff;
        font-size: 0.266667rem;
        border-radius: 0.293333rem;
        text-align: center;
      }
      .comm_deta {
        display: flex;
        justify-content: space-between;
        line-height: 1.226667rem;
      }
      // 复制按钮
      .dup_btn {
        position: absolute;
        top: 1.6rem;
        right: 0.586667rem;
        width: 1.066667rem;
        height: 0.586667rem;
        line-height: 0.586667rem;
        text-align: center;
        color: #fff;
        background: #1689ce;
        border-radius: 0.293333rem;
      }
    }
  }
}
// 时间选择
.timeScree {
  margin: 0.266667rem;
  font-size: 0.373333rem;
  .timeScree_item {
    margin: 0.533333rem 0;
  }
}
</style>